<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CSS Painting API example</title>
    <style>
      li {
        background-image: paint(boxbg);
        --boxColor: hsl(55 90% 60%);
      }

      li:nth-of-type(3n) {
        --boxColor: hsl(155 90% 60%);
        --widthSubtractor: 20;
      }

      li:nth-of-type(3n + 1) {
        --boxColor: hsl(255 90% 60%);
        --widthSubtractor: 40;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
      <li>item 11</li>
      <li>item 12</li>
      <li>item 13</li>
      <li>item 14</li>
      <li>item 15</li>
      <li>item 16</li>
      <li>item 17</li>
      <li>item</li>
    </ul>
  </body>
  <script>
    CSS.paintWorklet.addModule("boxbg.js");
  </script>
</html>
